<template>
	<section class="userProfile">
		<el-row>
			<el-col :span="24">概要</el-col>
		</el-row>
		<el-row>
			<el-col :span="4">
				<div class="title">累计商家</div>
				<div class="num">{{cumulativeMerchant}}</div>
			</el-col>
			<el-col :span="4">
				<div class="title">开通服务商家/线上开通</div>
				<div class="num">{{openServiceBusiness}}/{{onlineOpening}}</div>
			</el-col>
			<el-col :span="4">
				<div class="title">过去7天活跃商家</div>
				<div class="num">{{activeBusinessLastSeven}}</div>
			</el-col>
			<el-col :span="4">
				<div class="title">累计订单量</div>
				<div class="num">{{orderQuantity}}</div>
			</el-col>
			<el-col :span="4">
				<div class="title">累计成单量</div>
				<div class="num">{{successQrderQuantity}}</div>
			</el-col>
			<el-col :span="4" class="last">
				<div class="title">累计成单金额</div>
				<div class="num">${{successQrderAmount}}</div>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="4">
				<div class="title">累计买家</div>
				<div class="num">{{cumulativeBuyer}}</div>
			</el-col>
			<el-col :span="4">
				<div class="title">昨日新增买家</div>
				<div class="num">{{addBuyersYesterday}}</div>
			</el-col>
			<el-col :span="4">
				<div class="title">过去7天新增买家</div>
				<div class="num">{{addBuyersLastSeven}}</div>
			</el-col>
			<el-col :span="4">
				<div class="title">过去30天新增买家</div>
				<div class="num">{{addBuyersLastThirty}}</div>
			</el-col>
			<el-col :span="4">
				<div class="title">过去7天活跃买家</div>
				<div class="num">{{activeBuyersLastSeven}}</div>
			</el-col>
			<el-col :span="4" class="last">
				<div class="title">过去30天活跃买家</div>
				<div class="num">{{activeBuyersLastThirty}}</div>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24" class="last_seven">最近7天整体趋势</el-col>
		</el-row>
		<div class="chart">
			<div class="button" v-model="newValue">
		        <div v-for="(items,index,key) in searchbtn" :key="index" class="item" :class="items.isactive?'active':''" @click="getLastSevenTrends(index)">{{items.label}}</div>
			</div>
			<highcharts :options="charts"></highcharts>
		</div>
	</section>
</template>

<script>
	import Vue from 'vue'
	import {Row,Col} from 'element-ui'
	import { mapGetters} from 'vuex';
	import VueHighcharts from "vue-highcharts"
	import Highcharts from  "highcharts";
	import {searchbtn,charts} from '~/assets/js/userProfile'
	
	Vue.use(VueHighcharts, { Highcharts })
	Vue.use(Row);
	Vue.use(Col);
	export default {
		head(){
	        return {
	            title: this.title
	        }
      	},
      	data () {
      		return {
      			tabName: '用户概况',
            	title: '用户概况',
            	newValue:'',
            	searchbtn:searchbtn,
            	charts:charts,
            	chartsData:[],
            	cumulativeMerchant:'0',
            	openServiceBusiness:'0',
            	onlineOpening:'0',
            	activeBusinessLastSeven:'0',
            	orderQuantity:'0',
            	successQrderQuantity:'0',
            	successQrderAmount:'0',
            	cumulativeBuyer:'0',
            	addBuyersYesterday:'0',
            	addBuyersLastSeven:'0',
            	addBuyersLastThirty:'0',
            	activeBuyersLastSeven:'0',
            	activeBuyersLastThirty:'0',
            	dataList:[]
            	
            	
      		}
      	},
      	computed : {
            ...mapGetters({
                'pageTabsList': 'getPageTabsList'
            }),
		},
		mounted(){
			this.getData()
		},
		methods: {
			getLastSevenTrends(index){
        		this.searchbtn.forEach((n,i)=>{//添加样式
	                n.isactive = i == index?true:false
	           	});
	           	this.chartsData=[];
	           	this.charts.series = [];
	           	if(this.dataList.length>0){
	           		let list=this.dataList
	           		this.charts.chart.type="line"
					this.charts.yAxis.max=null
					this.charts.legend.enabled=true
		           	if(index==0){
		           		let timeArr=[];
				      	let shopAddList=[];
				      	for(let i=0;i<list.length;i++){
				      		timeArr.push(list[i].rptDateText)
				      		shopAddList.push(list[i].shopAdd)
				      	}
				      	this.chartsData.push(
							{name:"新增商家",data : shopAddList}
						)
				      	this.charts.series =  this.chartsData;
						this.charts.xAxis.categories=timeArr
		           	}
		           	if(index==1){
		           		let timeArr=[];
				      	let shopActiveList=[];
				      	for(let i=0;i<list.length;i++){
				      		timeArr.push(list[i].rptDateText)
				      		shopActiveList.push(list[i].shopActive)
				      	}
				      	this.chartsData.push(
							{name:"活跃商家",data : shopActiveList}
						)
				      	this.charts.series =  this.chartsData;
						this.charts.xAxis.categories=timeArr
		           	}
		           	if(index==2){
		           		let timeArr=[];
				      	let shopServicedList=[];
				      	for(let i=0;i<list.length;i++){
				      		timeArr.push(list[i].rptDateText)
				      		shopServicedList.push(list[i].shopServiced)
				      	}
				      	this.chartsData.push(
							{name:"开通服务商家",data : shopServicedList}
						)
				      	this.charts.series =  this.chartsData;
						this.charts.xAxis.categories=timeArr
		           	}
		           	if(index==3){
		           		let timeArr=[];
				      	let buyerAddList=[];
				      	for(let i=0;i<list.length;i++){
				      		timeArr.push(list[i].rptDateText)
				      		buyerAddList.push(list[i].buyerAdd)
				      	}
				      	this.chartsData.push(
							{name:"新增买家",data : buyerAddList}
						)
				      	this.charts.series =  this.chartsData;
						this.charts.xAxis.categories=timeArr
		           	}
		           	if(index==4){
		           		let timeArr=[];
				      	let buyerActiveList=[];
				      	for(let i=0;i<list.length;i++){
				      		timeArr.push(list[i].rptDateText)
				      		buyerActiveList.push(list[i].buyerActive)
				      	}
				      	this.chartsData.push(
							{name:"活跃买家",data : buyerActiveList}
						)
				      	this.charts.series =  this.chartsData;
						this.charts.xAxis.categories=timeArr
		           	}
		           	if(index==5){
		           		let timeArr=[];
				      	let orderAddList=[];
				      	for(let i=0;i<list.length;i++){
				      		timeArr.push(list[i].rptDateText)
				      		orderAddList.push(list[i].orderAdd)
				      	}
				      	this.chartsData.push(
							{name:"成单量",data : orderAddList}
						)
				      	this.charts.series =  this.chartsData;
						this.charts.xAxis.categories=timeArr
		           	}
		           	if(index==6){
		           		let timeArr=[];
				      	let pvList=[];
				      	for(let i=0;i<list.length;i++){
				      		timeArr.push(list[i].rptDateText)
				      		pvList.push(list[i].pv)
				      	}
				      	this.chartsData.push(
							{name:"PV",data : pvList}
						)
				      	this.charts.series =  this.chartsData;
						this.charts.xAxis.categories=timeArr
		           	}
		           	if(index==7){
		           		let timeArr=[];
				      	let uvList=[];
				      	for(let i=0;i<list.length;i++){
				      		timeArr.push(list[i].rptDateText)
				      		uvList.push(list[i].uv)
				      	}
				      	this.chartsData.push(
							{name:"UV",data : uvList}
						)
				      	this.charts.series =  this.chartsData;
						this.charts.xAxis.categories=timeArr
		           	}
	           	}else{
	           		this.charts.yAxis.max=100
					this.charts.chart.type="column"
					this.charts.series =[0,0,0,0,0,0,0]
					this.charts.legend.enabled=false
	           	}
	           	
	    	},
	    	
	    	getData(){
	    		this.$store.dispatch('getLastSevenTrends')
					.then((response) => {
						let result = response.data;
						if(result.successed == true && result.data !== null) {
							this.cumulativeMerchant = result.data.shopCount;
							this.openServiceBusiness = result.data.shopInService;
							this.onlineOpening = result.data.shopOnLine;
							this.activeBusinessLastSeven = result.data.shopActiveIn7Days;
							this.orderQuantity = result.data.orderCount;
							this.successQrderQuantity = result.data.orderSuccessedCount;
							this.successQrderAmount = result.data.orderSuccessedAmount;
							this.cumulativeBuyer = result.data.buyerCount;
							this.addBuyersYesterday = result.data.buyerAddYesterdayCount;
							this.addBuyersLastSeven = result.data.buyerAddIn7DaysCount;
							this.addBuyersLastThirty = result.data.buyerAddIn30DaysCount;
							this.activeBuyersLastSeven = result.data.buyerActiveIn7DaysCount;
							this.activeBuyersLastThirty = result.data.buyerActiveIn30DaysCount;
							this.dataList=result.data.shopBuyerVOList
							this.getLastSevenTrends(0)
						}else{
							this.charts.yAxis.max=100
							this.charts.chart.type="column"
							this.charts.series =[0,0,0,0,0,0,0]
							this.charts.legend.enabled=false
						}
					})
					.catch((error) => {
							this.charts.yAxis.max=100
	    					this.charts.chart.type="column"
							this.charts.series =[0,0,0,0,0,0,0]
							this.charts.legend.enabled=false
                    })
	    	}
		},
		created() {
			//pageTab
			if(process.BROWSER_BUILD) {
                if(this.pageTabsList[this.pageTabsList.length-1].name == 'CRM') {
                    let arr = this.pageTabsList;
                    arr[arr.length-1].name = this.tabName;
                    this.$store.commit('PAGETABSLIST',{data:arr})
                }
            }
		},
	}
</script>

<style lang="scss">
	.userProfile{
		.el-col-4{
			text-align: center;
			height: 80px;
			line-height: 40px;
			border-left:1px solid #eee;
			border-bottom:1px solid #eee;
			.title{
				font-size: 14px;
				color: #333;
			}
			.num{
				font-size: 20px;
				color: #000;
			}
		}
		.last{
			border-right:1px solid #eee;
		}
		.last_seven{
			margin-top: 20px;
		}
		.el-col-24{
			height: 40px;
			line-height: 40px;
			background: #eee;
			padding-left: 10px;
		}
		.chart{
			height: 500px;
			border: 1px solid #eee;
		}
		.button{
			margin: 20px;
			overflow: hidden;
			.item {
	                height: 30px;
	                font-size: 14px;
	                color: #333;
	                letter-spacing: 0.47px;
	                text-align: center;
	                line-height: 30px;
	                float: left;
	                padding: 0 20px;
	                border-radius: 2em;
	                cursor: pointer  ;
	            }
	            .item.active {
	            	background: #0686F9;
	                font-family: STHeitiSC-Light;
	                color: #fff;
	            }
		}
	}
</style>